{% extends base %}

{% block head %}
<style type="text/css">
    /* 上传文件样式 */
    .progress {
        background-color: #f90;
        color: #fff;
        height: 20px;
        display: none;
        margin-left: 5px;
        border-width: 3px;
    }
    .progress span {
        display: block;
        background-color: #f90;
        color: #fff;
        height: 100%;
    }
    
    .finished-tag {
        color: #fff;
        background-color: green;
        border-width: 3px;
        border-radius: 3px;
        margin-left: 5px;
    }

    .option-td {
        width: 25%;
    }
</style>

{% set search_action = '/fs_upload/search' %}
{% set search_placeholder = '搜索文件' %}

{% end %}

{% block body %}
    
    {% init page = "upload" %}

    <input type="hidden" id="dirname" value="{{dirname}}"/>

    {% if page == "upload" %}
    <div class="card">
        日期
        <select name="year" value="{{year}}">
            {% for j in range(year-5,year+6) %}
                <option value="{{j}}">{{j}}</option>
            {% end %}
        </select>
        <select name="month" value="{{month}}">
            {% for i in range(1,13) %}
                <option value="{{i}}">{{i}}</option>
            {% end %}
        </select>

        <div class="float-right">
            <a href="{{upload_link_by_month(year, month, -1)}}">上个月</a>
            <a href="{{upload_link_by_month(year, month, 1)}}">下个月</a>
            {% if _is_admin %}
                <a href="/fs_list">管理</a>
            {% end %}
        </div>
    </div>
    {% end %}

    {% if page == "search" %}
    <div class="card">
        <h3>搜索结果</h3>
    </div>
    {% end %}

    {% import os %}
    <div class="card row">
        {% if page == "upload" %}
            {% include fs/mod_fs_upload.html %}
        {% end %}

        {% if len(pathlist) == 0 %}
            空空如也~
        {% end %}

        <table class="table row">
        {% for fpath in pathlist %}
            {% set fname = os.path.basename(fpath) %}
            {% set display_name = get_display_name(fpath, dirname) %}
            <tr>
                <td><a href="{{get_webpath(fpath)}}">{{display_name}}</a></td>
                <td class="option-td">
                    {{xutils.format_file_size(fpath)}}
                </td>
                <td class="option-td">
                    <!--
                    <button class="btn">下载</button>
                    -->
                    <button class="btn rename-btn" data-name="{{display_name}}">重命名</button>
                    <button class="btn-danger delete-btn" data-path="{{fpath}}" data-name="{{display_name}}">删除</button>
                </td>
            </tr>
        {% end %}
        </table>
    </div>

    <script>
    $(function () {
        $("select").change(function (e) {
            var year = $("[name=year]").val();
            var month = $("[name=month]").val();
            location.href = "?year=" + year + "&month=" + month;
        });

        $(".rename-btn").click(function (e) {
            var dirname = $("#dirname").val();
            var oldName = $(this).attr("data-name");
            xnote.prompt("输入新的文件名", oldName, function (newName) {
                if (newName != oldName && newName) {
                    $.post("/fs_api/rename", 
                        {dirname: dirname, old_name: oldName, new_name: newName}, 
                        function (resp) {
                            if (resp.code == "success") {
                                window.location.reload();
                            } else {
                                xnote.alert("重命名失败:" + resp.message);
                            }
                    }).fail(function (e) {
                        xnote.alert("系统繁忙，请稍后重试");
                    });
                } else {
                    xnote.alert("请输入有限文件名");
                }
            });
        });

        $(".delete-btn").click(function (e) {
            var path = $(this).attr("data-path");
            var name = $(this).attr("data-name");
            xnote.confirm("删除【" + name + "】?", function (value) {
                $.post("/fs_api/remove", {path: path}, function (resp) {
                    if (resp.code == "success") {
                        window.location.reload();
                    } else {
                        xnote.alert("删除失败:" + resp.message);
                    }
                }).fail(function (resp) {
                    xnote.alert("系统繁忙，请稍后重试");
                })
            });
        })
    })
    </script>

{% end %}

{% block aside %}
    <div class="aside-item">
        <div class="aside-title">
            日期
        </div>
        <div class="aside-content">
        </div>
    </div>
{% end %}
